<template>
  <div class="box_bg_content_box">
    <div v-for="(item, index) in moduleList.filter(i=>i.selected =='1')" :key="index" class="box_bg_content_item">
      <img :src="item.iconNoSelected">
      <span>{{ item.nameTemp }}</span>
    </div>>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moduleList: [],
      txImg: require('@/icons/png/default_pic.png')
    }
  },
  mounted() {
    this.$bus.$on('miniTabbarChange', (val) => {
      this.moduleList = [...val]
    })
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.box_bg_content_box {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0px -2px 0px 0px #EEEEEE;
  left: 0;

  .box_bg_content_item {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 16px 0;

    img {
      width: 50px;
      height: 50px;
      margin-bottom: 5px;
      vertical-align: top;
    }

    span {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 1;
      &.on {
        color: $primaryColor;
      }
    }
  }
}
</style>
